<template>
  <div>
    <van-nav-bar fixed placeholder title='收藏'>
    </van-nav-bar>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
      <article-item v-for="item in articleList" :key="item.id" :articleList="item"></article-item>
    </van-list>
  </div>
</template>

<script>
import { getInterviewOptList } from '../api/article'
export default {
  data() {
    return {
      current: 1,
      articleList: [],
      loading: true,
      finished: false,
    }
  },
  created() {
    // 加载点赞列表
    this.loadViewOptList()
  },
  methods: {
    // 多处要加载列表数据, 将获取列表数据封装成方法
    async loadViewOptList() {
      const res = await getInterviewOptList({
        // 第几页
        page: this.current,
        optType: 2
      })
      console.log('ac', res.data.data);
      if (this.current === 1) {
        this.articleList = res.data.data.rows
      }
      else {
        // 拼接数组
        this.articleList = [...this.articleList, ...res.data.data.rows]
      }
      // 判断是否有更多的数据
      this.finished = this.current >= res.data.data.pageTotal
      this.loading = false // 关闭加载
    },
    loadMore() {
      this.current++
      this.loadViewOptList()
    },
    onArticleChange() {
      this.current = 1
      this.loadViewOptList()
    }
  }
}
</script>

<style>
.right-logo {
  color: #fa6d1e;
  font-weight: 900;
  font-size: 24px;
}
</style>